<template>

  <button style="background: #F59F34;cursor:pointer;border: 0px;color: white;height: 38px;border-radius: 4px;" @click.prevent="run($event)" :disabled="disabled || time > 0">{{ text }}</button>

</template>

<script>
export default {
  name: "index",
  props: {
    second: {
      type: Number,
      default: 60
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data:function () {
    return {
      time: 0
    }
  },
  methods: {
    run: function (e) {
      e.preventDefault();
      this.$emit('run');
    },
    stop: function(){
      this.time = 0;
      this.$emit('stop');
    },

    start: function(){
      this.time = this.second;
      this.timer();
    },
    timer: function () {
      if (this.time > 0) {
        this.time--;
        setTimeout(this.timer, 1000);
      }else{
        this.$emit('stop');
      }
    }

  },
  computed: {
    text: function () {
      return this.time > 0 ? this.time + 's 后重获取' : '获取验证码';
    }
  }
}
</script>

<style scoped>

</style>
